<template>
  <div class="app-container">
    <div class="operation-container">
      <div class="filter-container">
        <el-form :inline="true" label-width="72px">
          <el-form-item label="菜单名称">
            <el-input v-model="listQuery.title" placeholder="请输入菜单名称" class="filter-item" />
          </el-form-item>
          <el-form-item label="组件路径">
            <el-input v-model="listQuery.component" placeholder="请输入组件路径" class="filter-item" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="listQuery.status" placeholder="全部" class="filter-item">
              <el-option value="">全部</el-option>
              <el-option
                v-for="item in dict['sys_status']"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="filter-item" type="primary" round icon="el-icon-search" @click="handleFilter">
              搜索
            </el-button>
            <el-button class="filter-item" round icon="el-icon-search" @click="handleReset">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-button class="filter-item" type="primary" round icon="el-icon-edit" @click="handleCreate">
        新增菜单
      </el-button>
    </div>
    <div class="operation-container">
      <el-table
        ref="menuTable"
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        row-key="id"
        style="width: 100%;"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column label="菜单名称" prop="title">
          <template slot-scope="{row}">
            <svg-icon v-if="row.icon" :icon-class="row.icon" class="margin-right-10" />
            <span>{{ row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型" prop="type" width="100">
          <template slot-scope="{row}">
            <template v-for="(item,index) in dict['sys_menu_type']">
              <el-tag v-if="item.value === row.type" :key="index" :type="item.listClass">{{ item.label }}</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="mark"
          label="权限标识"
        />
        <el-table-column
          prop="component"
          label="组件路径"
        />
        <el-table-column
          prop="sort"
          label="排序"
          sortable
          width="100"
        />
        <el-table-column label="状态" prop="status" width="100">
          <template slot-scope="{row}">
            <template v-for="(item,index) in dict['sys_status']">
              <el-tag v-if="item.value === row.status" :key="index" :type="item.listClass">{{ item.label }}</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime">
          <template slot-scope="{row}">
            <i class="el-icon-time margin-right-5" />
            <span>{{ row.createTime | dateFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button type="text" @click="handleUpdate(row)">
              <i class="el-icon-edit" />修改
            </el-button>
            <el-button v-if="row.id !== '1' && row.type !== 'F'" type="text" @click="handleCreate(row)">
              <i class="el-icon-plus" />新增
            </el-button>
            <el-button v-if="row.id !== '1'" type="text" @click="handleDelete(row)">
              <i class="el-icon-delete" />删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :title="textMap[dialogStatus]" width="650px" append-to-body :visible.sync="dialog">
      <el-form
        ref="dataForm"
        label-width="100px"
        :model="menu"
        :rules="rules"
      >
        <el-form-item label="上级菜单" prop="parentId">
          <el-select v-model="menu.parentId" placeholder="请选择">
            <el-option label="顶级菜单" value="0" />
            <el-option
              v-for="item in parent"
              :key="item.id"
              :label="item.title"
              :value="item.id"
              :disabled="item.disabled"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="menu.id !== '14'" label="类型" prop="type">
          <template v-for="(item,index) in dict['sys_menu_type']">
            <el-radio :key="index" v-model="menu.type" :label="item.value">{{ item.label }}</el-radio>
          </template>
        </el-form-item>
        <el-form-item
          label="标题"
          prop="title"
        >
          <el-input v-model="menu.title" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item
              v-if="menu.type === 'F'"
              label="标识"
              prop="mark"
            >
              <el-input v-model="menu.mark" />
            </el-form-item>
            <el-form-item
              v-if="menu.type !== 'F'"
              label="菜单图标"
            >
              <el-popover
                placement="bottom-start"
                width="460"
                trigger="click"
                @show="$refs['iconSelect'].reset()"
              >
                <icon-select ref="iconSelect" @selected="selected" />
                <el-input slot="reference" v-model="menu.icon" placeholder="点击选择图标" readonly>
                  <svg-icon
                    v-if="menu.icon"
                    slot="prefix"
                    :icon-class="menu.icon"
                    class="el-input__icon"
                    style="height: 32px;width: 16px;"
                  />
                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                </el-input>
              </el-popover>
            </el-form-item>
            <el-form-item
              label="排序"
              prop="sort"
              style="width: 50%;"
            >
              <el-input-number v-model="menu.sort" controls-position="right" :min="0" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <template v-for="(item,index) in dict['sys_status']">
                <el-radio :key="index" v-model="menu.status" :label="item.value">{{ item.label }}</el-radio>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="menu.type === 'C'" label="路由URL" label-position="right" prop="path">
              <el-input v-model="menu.path" />
            </el-form-item>
            <el-form-item v-if="menu.type === 'C'" label="路由路径" label-position="right" prop="component">
              <el-input v-model="menu.component" />
            </el-form-item>
            <el-form-item v-if="menu.type === 'C'" label="路由名称" label-position="right" prop="name">
              <el-input v-model="menu.name" />
            </el-form-item>
            <el-form-item
              v-if="menu.type === 'F'"
              label="接口类型"
              prop="method"
            >
              <el-select v-model="menu.method" placeholder="请选择接口类型">
                <el-option
                  v-for="(item,index) in dict['sys_method_type']"
                  :key="index"
                  :label="item.value"
                  :value="item.label"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="menu.type === 'F'"
              label="接口地址"
              prop="url"
            >
              <el-input v-model="menu.url" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button @click="dialog = false">
            取消
          </el-button>
          <el-button type="primary" @click="submitForm()">
            确认
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>
<script>

import { fetchList, deletes, parent, create, update } from '@/api/menu'
import { mapGetters } from 'vuex'
import IconSelect from '@/components/IconSelect/index'

export default {
  name: 'MenuTable',
  components: { IconSelect },
  data() {
    return {
      tableKey: 0,
      listLoading: true,
      list: [],
      parent: [],
      listQuery: {
        title: '',
        component: '',
        status: ''
      },
      menu: {
        id: undefined,
        parentId: undefined,
        title: undefined,
        mark: undefined,
        url: undefined,
        method: undefined,
        sort: 0,
        status: 'Y',
        type: 'C',
        icon: undefined,
        path: undefined,
        component: undefined,
        name: undefined
      },
      dialog: false,
      dialogStatus: '',
      textMap: {
        update: '修改菜单',
        create: '添加菜单'
      },
      rules: {
        title: [
          { required: true, trigger: 'blur', message: '标题不能为空' }
        ],
        mark: [
          { required: true, trigger: 'blur', message: '标识不能为空' }
        ],
        type: [
          { required: true, trigger: 'blur', message: '接口类型不能为空' }
        ],
        url: [
          { required: true, trigger: 'blur', message: '接口不能为空' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'dict'
    ])
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.2 * 1000)
      })
    },
    // 创建事件
    handleCreate(row) {
      this.resetFields()
      this.menu.parentId = row.id
      this.dialogStatus = 'create'
    },
    // 修改事件
    handleUpdate(row) {
      this.resetFields()
      this.menu = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
    },
    // 删除事件
    handleDelete(row) {
      this.listLoading = true
      deletes(row.id).then(response => {
        this.getList()
        this.$notify({
          title: '删除完成',
          message: '删除菜单:（' + row.title + '） 成功！',
          type: 'success',
          duration: 2000
        })
      })
    },
    // 查询事件
    handleFilter() {
      this.listQuery.pageNumber = 1
      this.getList()
    },
    // 重置查询事件
    handleReset() {
      this.listQuery = {
        title: undefined,
        component: undefined,
        status: undefined
      }
    }, // 选择图标
    selected(name) {
      this.menu.icon = name
    },
    submitForm() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.menu.id) {
            update(this.menu.id, this.menu).then(() => {
              this.dialog = false
              this.getList()
              this.$notify({
                title: '修改完成',
                message: '修改菜单:（' + this.menu.title + '） 成功！',
                type: 'success',
                duration: 2000
              })
            })
          } else {
            if (this.menu.type === 'M') {
              this.menu.component = 'Layout'
            }
            create(this.menu).then(() => {
              this.dialog = false
              this.getList()
              this.$notify({
                title: '新增完成',
                message: '新增菜单:（' + this.menu.title + '）成功！',
                type: 'success',
                duration: 2000
              })
            })
          }
        }
      })
    },
    resetFields() {
      this.menu = {
        id: undefined,
        parentId: undefined,
        title: undefined,
        mark: undefined,
        url: undefined,
        method: undefined,
        sort: 0,
        status: 'Y',
        type: 'C',
        icon: undefined,
        path: undefined,
        component: undefined,
        name: undefined
      }
      parent().then(response => {
        this.parent = response.data
      })
      if (this.$refs['dataForm'] !== undefined) {
        this.$refs['dataForm'].resetFields()
      }
      this.dialog = true
    }
  }
}
</script>
